@charset "UTF-8";
@import "_reset";
img {
    width: 100%;
    height: 100%;
    position: absolute;
}

body {
    width: 320px;
    height: 480px;
}

.all {
    width: 320px;
    height: 480px;
    overflow: hidden;
    position: relative;
    .xuan{
        width: 320px;
        height: 480px;
        opacity: 0;
//      transform: scale(0.5);
        animation: xuan 1000ms;
        @keyframes xuan {
            0%{
                opacity: 1;
                transform: scale(0.2) rotateZ(0deg);
            }
            100%{
                opacity: 1;
                transform: scale(1) rotateZ(720deg);
            }
        }
        img{
            width: 100%;
            height: 100%;
            
        }
    }
    .tip{
        position: absolute;
        top: 170px;
        left: 64px;
        width: 202px;
        height: 161px;
        z-index: 100;
        animation: tip 1200ms linear 1200ms 3;
        @keyframes tip{
            0%{
                transform: translateX(50px);
            }
            100%{
                transform: translateX(0px);
            }
        }
    }
    
}

#magazine {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -320px;
    width: 640px;
    height: 480px;
    .tip{
        width: 202px;
        height: 161px;
        img{
            width: 100%;
            height: 100%;
        }
    }
}

#magazine .turn-page {
    background-color: #FFFFFF;
    background-size: 100% 100%;
}